<!--
 * @Description: something
 * @Author: zy
 * @Date: 2021-04-19 09:32:51
 * @LastEditors: zy
 * @LastEditTime: 2021-06-09 16:25:20
-->
<template>
  <div style="height: 100%; width: 100%">
    <el-row style="height: 100%">
      <el-col :span="20" style="height: 100%">
        <el-row style="height: 60%">
          <el-col :span="4" style="height: 100%; border: 1px solid">
          <div id="rect"></div>
          </el-col>
          <el-col :span="16" style="height: 100%; border: 1px solid; border-left: 0px">
            <div id="airPollution">
              <div id="leaflet-map"></div>
              <div id="panel">
                <strong style="padding-left: 5px">聚类主要指标：</strong>
                <el-select v-model="clusterDefeaut" size="small" @change="granularityChange" style="width: 100px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <strong style="margin-left: 20px">时间粒度：</strong>
                <el-select v-model="dateDefeaut" size="small" @change="granularityChange" style="width: 100px">
                  <el-option v-for="item in granularity" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <strong style="margin-left: 20px">时间：</strong>
                <el-select v-model="selectDate" size="small" @change="dateChange" style="width: 120px">
                  <el-option v-for="item in dateSelect" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="4" style="height: 100%; border: 1px solid; border-left: 0px">
           <div id="pollutionrelative"></div>
          </el-col>
        </el-row>
        <el-row style="height: 40%">
          <el-col :span="12" style="height: 100%; border: 1px solid; border-top: 0px">
            <div id="sankey-chart"></div>
          </el-col>
          <el-col :span="12" style="height: 100%; border-right: 1px solid; border-bottom: 1px solid">
            <div id="parallelScatter"></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" style="height: 100%; border: 1px solid; border-left: 0px">
        <div id="main-pollution"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { LeafletMap } from '@/assets/js/geoMap/LeafletMap.js'
import { River } from '@/assets/js/clusterRiver/river.js'
import { Rect } from '@/assets/js/topCity/rect.js'
import { drawchart } from '@/assets/js/parallelScatter/parallel.js'
// import { Relative } from '@/assets/js/relationMatrix/relative.js'
import { Sankey } from '@/assets/js/sankeychart/sankey.js'
import { CityTransfer } from '@/assets/js/sankeychart/CityTransfer.js'
import { Steel } from '@/assets/js/relationMatrix/steel.js'
export default {
  data() {
    return {
      options: [
        {
          value: 'AQI',
          label: 'AQI'
        },
        {
          value: 'PM2.5(微克每立方米)',
          label: 'PM2.5'
        },
        {
          value: 'PM10(微克每立方米)',
          label: 'PM10'
        },
        {
          value: 'SO2(微克每立方米)',
          label: 'SO2'
        },
        {
          value: 'NO2(微克每立方米)',
          label: 'NO2'
        },
        {
          value: 'CO(毫克每立方米)',
          label: 'CO'
        },
        {
          value: 'O3(微克每立方米)',
          label: 'O3'
        }
      ],
      clusterDefeaut: 'AQI',
      granularity: [
        {
          value: 'week',
          label: '周'
        },
        {
          value: 'month',
          label: '月'
        },
        {
          value: 'quarter',
          label: '季度'
        }
      ],
      dateDefeaut: 'week',
      dateSelect: [],
      selectDate: '2013-01-01',
      chart: {}
    }
  },
  mounted() {
    let date = this.selectDate
    let type = this.dateDefeaut
    let main = this.clusterDefeaut
    let path = type + '_' + main + '.json'
    this.getRiver(path)
    this.cityTransfer()

    this.renderMap(date, type, main)
    this.getRect(date, type, main)
    this.getRelative(date, type, main)
    this.renderParallel(date, type, main)
  },
  methods: {
    async renderMap(date, type, main) {
      const { data: cityIndex } = await this.$http.post('/api/mapData',
        {'date': date, 'type': type, 'main': main}
      )
      // const { data: allCity } = await this.$http.get('./static/data/citySample.json')
      const { data: clipPath } = await this.$http.get('./static/data/ChinaOutline.json')
      // const { data: chinaMap } = await this.$http.get('./static/data/China.json')

      let lmap = new LeafletMap('leaflet-map', this)
      this.chart.mapChart = lmap
      lmap.initMap()
      // lmap.initProvinceMap(chinaMap)
      lmap.renderCityPoints(cityIndex)
      // lmap.initCityMap(allCity)
      lmap.renderOutline(clipPath)
      lmap.renderVoronoi(cityIndex)
      lmap.drawLegend()
    },
    async renderParallel(date, type, main) {
      const { data: cityIndex } = await this.$http.post('/api/citys_indexs',
        {'date': date, 'type': type, 'main': main}
      )
      let chart = drawchart(this)
      this.chart.parallelChart = chart
      chart.render('parallelScatter', cityIndex)
    },
    granularityChange() {
      let path = this.dateDefeaut + '_' + this.clusterDefeaut + '.json'
      this.updateRiver(path)
    },
    async getRiver(path) {
      const { data: cityvalue } = await this.$http.get('./static/data/value_' + path)
      const { data: citymain } = await this.$http.get('./static/data/main_' + path)
      this.dateSelect = []
      cityvalue.forEach(d => {
        this.dateSelect.push({
          'value': d.date,
          'label': d.date
        })
      })
      this.selectDate = this.dateSelect[0].label
      let pollution = new River('main-pollution', this)
      pollution.draw(cityvalue, citymain)
    },
    async getRect(date, type, main) {
      const { data: mainIndex } = await this.$http.post('/api/main_index',
        {'date': date, 'type': type, 'main': main}
      )
      let citytop = new Rect('rect', this)
      this.chart.cityTop = citytop
      citytop.draw(mainIndex)
    },
    async getRelative(date, type, main) {
      const {data: res} = await this.$http.post('/api/iaqi', {
        date: date,
        type: type,
        main: main
      })
      let steel = Steel('pollutionrelative', res)
      this.chart.steelChart = steel
      steel.renderChart()
    },
    async getSankey() {
      const {data: res} = await this.$http.get('./static/data/sankey.json')
      let san = new Sankey('sankey-chart')
      console.log(san)
      san.setData(res)
      san.draw()
    },
    async cityTransfer() {
      const {data: res} = await this.$http.get('./static/data/change_week_AQI.json')
      let chart = new CityTransfer('sankey-chart', this)
      this.chart.cityTransfer = chart
      chart.render(res)
    },
    dateChange() {
      let date = this.selectDate
      let type = this.dateDefeaut
      let main = this.clusterDefeaut
      this.updateMap(date, type, main)
      this.updateRect(date, type, main)
      this.getRelative(date, type, main)
      this.updateParallel(date, type, main)
    },
    async updateMap(date, type, main) {
      const { data: cityIndex } = await this.$http.post('/api/mapData',
        {'date': date, 'type': type, 'main': main}
      )
      this.chart.mapChart.renderVoronoi(cityIndex)
    },
    async updateParallel(date, type, main) {
      const { data: cityIndex } = await this.$http.post('/api/citys_indexs',
        {'date': date, 'type': type, 'main': main}
      )
      this.chart.parallelChart.render('parallelScatter', cityIndex)
    },
    async updateRect(date, type, main) {
      const { data: mainIndex } = await this.$http.post('/api/main_index',
        {'date': date, 'type': type, 'main': main}
      )
      this.chart.cityTop.draw(mainIndex)
    },
    async updateRelative() {

    },
    async updateRiver(path) {
      const { data: cityvalue } = await this.$http.get('./static/data/value_' + path)
      const { data: citymain } = await this.$http.get('./static/data/main_' + path)
      this.dateSelect = []
      cityvalue.forEach(d => {
        this.dateSelect.push({
          'value': d.date,
          'label': d.date
        })
      })
      this.selectDate = this.dateSelect[0].label
      let pollution = new River('main-pollution', this)
      pollution.draw(cityvalue, citymain)
      this.dateChange()
    },
    async updateTransfer(dateRange) {
      // const {data: res} = await this.$http.get('./static/data/all_list.json')
      // this.chart.cityTransfer.render(res)
    }
  }
}
</script>
<style scoped>
#airPollution {
  height: 100%;
  width: 100%;
}
#leaflet-map {
  height: 100%;
  width: 100%;
}
#panel {
  position: absolute;
  height: 50px;
  margin-left: 50px;
  top: 1px;
  padding-top: 5px;
  z-index: 111111;
}
#panel > strong {
  font-size: 14px;
  font-weight: 400;
}
#main-pollution, #parallelScatter, #sankey-chart{
  height:100%;
  width:100%;
}
#rect{
  height:100%;
  width:100%;
}
#pollutionrelative{
  height:100%;
  width:100%;
}
</style>
